body, #content-container
    background-color: $body-bg
    color: $body-color


#container.boxed-layout
    background-color: darken($body-bg, 4%)



.page-header
    color: lighten($body-color, 17%)


a
    color: $link-color
    &:hover,
    &:focus
        color: $link-hover-color



/* SEARCHBOX */
/*======================================*/
.searchbox
    .custom-search-form
        .input-group-btn
            &:before
                background-color: $state-active-bg;



/* Scrollbar */
/*======================================*/
.pace .pace-progress,
.nano > .nano-pane > .nano-slider
    background-color: darken($state-active-bg, 15%)


.pace
    .pace-progress-inner
        box-shadow: 0 0 10px $state-active-bg,0 0 5px $state-active-bg

    .pace-activity
        background-color: $state-active-bg





/* NAVBAR */
/*=====================================*/
#navbar
    background-color: $body-bg

@if lightness($mainnav-bg) < 70%
    #navbar-container
        box-shadow: 0 2px 0px -1px rgba(0,0,0,.05)



@if lightness($mainnav-bg) >= 70% and lightness($navbar-bg) >= 70%
    #navbar-container
        box-shadow: 0 2px 0px -1px darken($body-bg, 2.5%)


.navbar-header
    background-color: $brand-bg-overlay


.navbar-content
    background-color: $navbar-bg
    box-shadow: inset -4px 0 0 0 $state-active-bg



/* BRAND LOGO & TEXT */
/*====================================*/
.navbar-brand
    background-color: $brand-bg
    color: $mainnav-hover-color
    &:hover, &:focus
        color: $mainnav-hover-color



/* NAVIGATION */
/*======================================*/
@if lightness($mainnav-bg) >= 70%
    #mainnav-container
        box-shadow: 0 0 0 1px darken($body-bg, 3.5%)



/* NAVBAR ICON & BUTTON */
/*======================================*/
.navbar-icon-color
    color: darken($navbar-color,15%)


.navbar-top-links
    > li
        > a
            color: $navbar-color
            &:not(.mainnav-toggle) > i
                color: lighten($navbar-color, 40%)

            &:focus
                background-color: transparent
                &:not(.mainnav-toggle) > i
                    @extend .navbar-icon-color

            &:hover
                background-color: darken($navbar-bg, 5%)
                color: darken($navbar-color,15%)
                &:not(.mainnav-toggle) > i
                    @extend .navbar-icon-color



    > .open
        > a, > a:focus
            background-color: darken($navbar-bg, 5%)
            color: $navbar-color


    .tgl-menu-btn
        > a, > a:hover, > a:focus
            color: $brand-color




/* NAVBAR RESPONSIVE */
/*======================================*/
@media (min-width: 768px)
    #navbar
        background-color: transparent


    .navbar-header
        background-color: transparent
        &:before
            background-color: $brand-bg-overlay


    #navbar-container
        background-color: $navbar-bg

    #container.mainnav-in .brand-title,
    #container.mainnav-sm .brand-title,
    #container.mainnav-lg .brand-title
        color: $brand-color

    .navbar-top-links
        .tgl-menu-btn
            position: static
            > a, > a:hover
                color: $navbar-color

            > a:focus
                background-color: transparent
                color: $navbar-color







/* NAVIGATION */
/*======================================*/
#mainnav
    background-color: $mainnav-bg
    .list-header
        color: darken($mainnav-color,15%)






/* NAVIGATION MENU */
/*======================================*/


#mainnav-menu
    a
        color: $mainnav-color

    >li
        >a
            &:hover, &:active
                color: $mainnav-hover-color

            &.hover
                color: $mainnav-hover-color
                background-color: lighten($mainnav-bg,3%)
                box-shadow: inset 4px 0 0 0 $mainnav-active-state



    > .active-link
        >a, >a:hover
            color: $mainnav-hover-color
            box-shadow: inset 4px 0 0 0 $mainnav-active-state


    > .active-sub
        > a, >a:hover
            color: $mainnav-hover-color


    > .active
        background-color: darken($mainnav-bg, 3%)
        .active
            background-color: darken($mainnav-bg, 5%)



#mainnav-menu, .menu-popover .sub-menu
    ul
        a
            &:hover
                color: $mainnav-hover-color


        ul
            a
                &:hover
                    color: $mainnav-hover-color



        .active-link
            a
                color: $mainnav-hover-color
                box-shadow: inset 4px 0 0 0 $mainnav-active-state







@if ($mainnav-collapse == true)
    #container.mainnav-sm
        #mainnav-menu
            a:hover
                box-shadow: inset 4px 0 0 0 $mainnav-active-state

            >.active
                &-link, &-sub
                    > a, a:hover
                        background-color: $mainnav-active-state









/* NAVIGATION - SHORTCUT BUTTONS */
/*======================================*/
#mainnav-shortcut .shortcut-grid
    color: $mainnav-hover-color





/* NAVIGATION - WIDGET */
/*======================================*/
.mainnav-widget
    background-color: rgba(0,0,0,.05)
    color: $mainnav-color






@if ($mainnav-collapse == true)
    @media (min-width: 768px)
        #container.mainnav-sm
            .shortcut-grid:hover
                box-shadow: inset 4px 0 0 0 $mainnav-active-state

            .shortcut-grid:hover,
            .popover.mainnav-shortcut
                background-color: lighten($mainnav-bg, 3%)
                color: $mainnav-hover-color

            #mainnav-menu
                .active-link, .active-sub
                    > a
                        color: $state-active-color



            #mainnav
                .mainnav-widget
                    >.show-small
                        a
                            color: $mainnav-color
                            &:hover
                                color: $mainnav-hover-color
                                box-shadow: inset 4px 0 0 0 $mainnav-active-state



                    .hover
                        color: $mainnav-hover-color
                        background-color: lighten($mainnav-bg, 3%)






        /* NAVIGATION - POPOVER  */
        /*======================================*/
        .menu-popover
            .sub-menu
                ul
                    background-color: darken($mainnav-bg,3%)
                    ul
                        background-color: darken($mainnav-bg,5%)

                    li
                        >a
                            color: $mainnav-hover-color




            .single-content
                color: $mainnav-hover-color
                background-color: lighten($mainnav-bg, 3%)

            &.popover
                background-color: darken($mainnav-bg,2%)
                color: $mainnav-hover-color

            >.popover-title
                background-color: lighten($mainnav-bg, 3%)
                color: $mainnav-hover-color

            .mainnav-widget-content
                background-color: lighten($mainnav-bg, 3%)



    .mainnav-sm .popover.mainnav-shortcut
        background-color: darken($mainnav-bg,2%)
        color: $mainnav-hover-color






/* NAVIGATION - OFFCANVAS */
/*======================================*/
@media (min-width: 768px)
    .nav-oc-shadow
        box-shadow: -20px 0 0 0 $mainnav-bg

    #container.mainnav
        &-in
            &.easeInBack, &.easeOutBack, &.easeInOutBack, &.jumping
                #mainnav-container
                    @extend .nav-oc-shadow



        &-out
            .brand-title
                background-color: transparent
                color: $brand-color-overlay

            &.easeInBack, &.easeOutBack, &.easeInOutBack, &.jumping
                #mainnav-container
                    @extend .nav-oc-shadow







/* ASIDE */
/* ===================================== */
#container
    #aside-container
        background-color: $aside-bright-bg

    #aside
        .list-link li a:not(.btn)
            color: darken($aside-dark-color,18%)
            &:hover
                color: $aside-dark-color





#aside
    background-color: $aside-dark-bg
    color: $aside-dark-color
    a:not(.btn):not(.btn-link)
        color: inherit

    .bord-all,
    .bord-top,
    .bord-btm,
    .bord-left,
    .bord-rgt,
    .bord-hor,
    .bord-ver,
    .list-divider
        border-color: lighten($aside-dark-bg,3%)

    .btn-link
        color: $aside-dark-color

    .text-muted
        color: lighten($aside-dark-bg,35%)




@if $aside-tabs == true

    /* Aside with tabs */
    /* ===================================== */
    #aside
        #aside-container &
            .nav-tabs
                li:not(active)
                    a
                        background-color: darken($aside-dark-bg,3%)




        #container.aside-bright &
            .nav-tabs
                li:not(.active) a
                    background-color: darken($aside-bright-bg,5%)







@media (min-width: 768px)
    #aside
        background-color: $aside-dark-bg

    #container
        #aside-container
            background-color: $aside-bright-bg





/* ASIDE : BRIGHT COLOR THEMES */
/* ===================================== */
#container
    &.aside-bright
        #aside
            background-color: $aside-bright-bg
            border-color: darken($aside-bright-bg, 5%)
            color: $aside-bright-color
            @if lightness($mainnav-bg) >= 70%
                border: 1px solid darken($body-bg, 7.5%)

            @if lightness($body-bg) >= 95%
                border: 1px solid darken($body-bg, 7.5%)

            .text-light
                color : $body-color

            .bord-all,
            .bord-top,
            .bord-btm,
            .bord-lft,
            .bord-rgt,
            .bord-hor,
            .bord-ver,
            .list-divider
                border-color: darken($aside-bright-bg, 3%)

            .text-muted
                color : lighten($body-color,30%)

            .progress
                background-color: darken($aside-bright-bg, 10%)

            .list-link li a:not(.btn)
                color: lighten($aside-bright-color,5%)
                &:hover
                    color: $aside-bright-color


            a:not(.btn)
                color: $aside-bright-color
                &:hover, &:focus
                    color: darken($aside-bright-color,10%)


            .btn-link
                color: $aside-bright-color









/* FOOTER */
/*======================================*/
#container.footer-fixed
    #footer
        background-color: $footer-bg
        color: $footer-color





/* BORDER */
/*======================================*/
.bord-no
    border: 0 !important
.bord-all
    border: 1px solid $border-color-base
.bord-top
    border-top: 1px solid $border-color-base
.bord-btm
    border-bottom: 1px solid $border-color-base
.bord-lft
    border-left: 1px solid $border-color-base
.bord-rgt
    border-right: 1px solid $border-color-base
.bord-ver
    border-top: 1px solid $border-color-base
    border-bottom: 1px solid $border-color-base

.bord-hor
    border-right: 1px solid $border-color-base
    border-left: 1px solid $border-color-base





/* TIMELINE */
/*======================================*/
@if $timeline == true
    .timeline
        background-color: $timeline-bg
        color: $timeline-color
        &:before, &:after
            background-color: lighten($timeline-border-color, 12%)


    .timeline-time
        background-color: $timeline-bg
        color: lighten($timeline-color, 20%)

    .timeline-icon
        box-shadow: 0 0 0 7px $body-bg
        &:empty
            background-color: $timeline-border-color


    .timeline-label
        background-color: $light-bg
        border: 1px solid $border-color-base
        &:before
            border-right: 10px solid darken($border-color-base,1%)

        &:after
            border-right: 9px solid $light-bg


    .panel
        .timeline-label
            background-color: darken($light-bg, 3%)
            border: 1px solid darken($border-color-base, 2.5%)
            &:before
                border-right-color: darken($border-color-base, 2.5%)

            &:after
                border-right-color: darken($light-bg, 3%)




    @media (min-width: 768px)
        .two-column.timeline
            .timeline-entry:nth-child(even)
                .timeline-label
                    &:before
                        border-left: 10px solid darken($border-color-base,1%)

                    &:after
                        border-left: 9px solid $light-bg











/* FORM WIZARD */
/*======================================*/
@if $form-wizard == true
    // Black & white icons
    .wz-icon-bw li
        &.active ~ li > a .icon-wrap
            color: $body-color
            background-color: rgba(0,0,0,.17)

        &:not(.active) > a p
            color: $body-color !important








/* FORM CONTROL  */
/*======================================*/
@if $form-control == true
    .form-control
        &:focus
            border-color: $state-active-bg






/* LIST GROUP */
/*======================================*/
@if $list-group == true
    .list-group-item
        &.active
            &, &:hover, &:focus
                background-color: $state-active-bg
                border-color: $state-active-bg
                color: $state-active-color
                .list-group-item-text
                    color: $state-active-color








/* DROPDOWN */
/*======================================*/
@if $dropdown == true
    .dropdown-menu
        >li
            >a
                &:hover
                    background-color: $state-active-bg
                    color: $state-active-color








/*======================================*/
/* PAGER */
/*======================================*/
@if $pager == true
    .pager
        li
            >a
                &:hover,&:focus
                    background-color: $light-bg
                    border-color: $state-active-bg
                    color: $state-active-bg
                    box-shadow: inset 0 0 1px $state-active-bg
                    z-index: 2
                    @include transition(border-color, .3s)








/*======================================*/
/* PAGINATION */
/*======================================*/
@if $pagination == true
    .pagination
        >li
            a
                &:hover,
                &:focus
                    border-color: $state-active-bg
                    color: $state-active-bg
                    box-shadow: inset 0 0 1px $state-active-bg



        >.active
            >a, >span, >a:hover, >span:hover, >a:focus, >span:focus
                background-color: $state-active-bg
                border-color: $state-active-bg








/* TAB */
/*======================================*/
@if $tabs == true
    .tab
        &-base
            .tab-content
                .tab-footer
                    background-color: lighten($body-bg,3%)
                    color: $body-color
                    border-color: lighten($body-bg,1%)


            .nav-tabs
                >li:not(.active)
                    >a
                        &:hover
                            border-color: $state-active-bg







    .tab-stacked
        &-left
            &.tab-base
                .nav-tabs
                    >li:not(.active)
                        a
                            &:hover
                                border-color: $state-active-bg
                                border-right-color: transparent






        &-right
            &.tab-base
                .nav-tabs
                    >li:not(.active)
                        a
                            &:hover
                                border-color: $state-active-bg
                                border-left-color: transparent











/* BUTTONS */
/*======================================*/
.btn-trans
    color: lighten($body-color, 20%)






/* PANELS */
/*======================================*/
.panel
    @if lightness($body-bg) >= 95%
        &:not(.panel-colorful)
            border: 1px solid darken($body-bg, 1.5%)



.panel-footer
    background-color: lighten($body-bg,3%)
    color: $body-color
    border-color: lighten($body-bg,1%)
    position: relative

